<template>
	<view>
		<view class="roast">
			<view class="userinfo dis jcsb aic">
				<view class="dis aic">
					<view class="aravat">
						<image style="width: 100%;"
							:src="discussionDetail.avatar ?discussionDetail.avatar: '/static/icon/icon04.png'"
							mode="widthFix"></image>
					</view>
					<view class="">
						<view class="dis jss aic">
							<view class="username">{{discussionDetail.nickName}}</view>
							<!-- <image class="live" src="/static/icon/live1.png" mode="widthFix"></image> -->
						</view>
						<view class="dis jss aic time">
							<view>{{discussionDetail.createTime | monthDay }}</view>
							<view>{{discussionDetail.createTime | hourMinute  }}</view>
						</view>
					</view>
				</view>
				<view class="dis jcc aic">
					<view :class="[discussionDetail.isFollow == 1 ? 'ready_gunazhu' : 'gunazhu']" @click="followClick">
						{{discussionDetail.isFollow == 1 ? '已关注' : '关注'}}
					</view>
					<MoreDel :id='id' @delCom='delCom' v-if="isMy && isMy !='false'"></MoreDel>
					<More :id='id' v-else></More>

					<!-- <image class="more" src="/static/icon/more.png" mode="widthFix"></image> -->
				</view>

			</view>
			<view class="centent">
				<CommentInput :isOpen="true" @submit="submit" :id="id">
					<template v-slot:trigger="{ showCommentInput }">
						<text class="text" @tap="showCommentInput">{{discussionDetail.content}}</text>
					</template>
				</CommentInput>
			</view>
			<viwe class="image" v-if="discussionDetail.images">
				<view>
					<image v-if="discussionDetail.images.split(',')[0]" :src="discussionDetail.images.split(',')[0]"
						class="image_art" mode="aspectFit"></image>
					<image v-if="discussionDetail.images.split(',')[1]" :src="discussionDetail.images.split(',')[1]"
						class="image_art" mode="aspectFit"></image>
				</view>
			</viwe>
			<view class="detail dis aic jcsb">
				<view class="dis aic jcc">
					<view class="browse">
						{{discussionDetail.lookCount}}浏览
					</view>

				</view>
				<view class="dis jcc aic operate">
					吐槽投诉
				</view>
			</view>
			<view class="btns">
				<view class="btn" @click="share">
					<image class="icon" src="/static/icon/icon05.png" mode="widthFix"></image>
					<view class="lable">
						分享
					</view>
				</view>

				<CommentInput :isOpen="true" @submit="submit" :id="id">
					<template v-slot:trigger="{ showCommentInput }">
						<view class="btn" @tap="showCommentInput">
							<image class="icon" src="/static/icon/icon06.png" mode="widthFix"></image>
							<view class="lable">
								{{discussionDetail.commentCount}}
							</view>

						</view>
					</template>
				</CommentInput>

				<view class="btn">
					<image style="width: 32rpx;"
						:src="discussionDetail.isLike == 1  ? '/static/icon/zan.png' : '/static/icon/zan2.png'"
						mode="widthFix" @click.stop="like(item)"></image>
					<!-- <image class="icon" src="/static/icon/icon07.png" mode="widthFix"></image> -->
					<view class="lable">
						{{discussionDetail.likeCount}}
					</view>
				</view>
			</view>
			<view class="line"></view>
			<view class="official_account dis aic jcsb">
				<view class="">
					<view class="title">
						趣校源
					</view>
					<view class="tips">
						扫码进趣校源公众号
					</view>
					<view class="tips">
						实时获取社区最新动态
					</view>
				</view>
				<image class="code" src="/static/image/code.png" mode="widthFix" :show-menu-by-longpress="true"></image>
			</view>
			<view class="line"></view>
			<view class="comment">
				<u-tabs :list="list1" lineColor='#FBE43F'
					:inactiveStyle="{ fontSize: '30rpx', transform: 'scale(1)',color: '#979797'  }"
					:activeStyle="{ color: '#000000',fontSize: '30rpx', }">
				</u-tabs>
				<view v-for="(item,index) in commentList" :key="index" style="margin-top: 20rpx;">
					<view class="dis aic">
						<view class="aravat">
							<image style="width: 100%;" :src="item.avatar ? item.avatar : '/static/icon/icon04.png'"
								mode="widthFix"></image>
						</view>
						<view class="">
							<view class="dis jss aic">
								<view class="username">{{item.nickName}}</view>
							</view>
							<view class="dis jss aic time">
								<view>{{item.createTime | monthDay}}</view>
								<view>{{item.createTime | hourMinute }}</view>
							</view>
						</view>
					</view>
					<view class="centent">
						<CommentInput :isOpen="true" @submit="submit" :id="item.id">
							<template v-slot:trigger="{ showCommentInput }">
								<text @tap="showCommentInput" class="text" user-select>{{item.content}}</text>
							</template>

						</CommentInput>

					</view>
					<view class="reply" v-if="item.commentCommentDTOList && item.commentCommentDTOList.length > 0">
						<view class="li">
							<view class="subscript">
							</view>
							<view v-for="(i,j) in item.commentCommentDTOList" :key="j" style="margin-bottom: 20rpx;">
								<view class="dis aic">
									<view class="aravat">
										<image style="width: 100%;"
											:src="i.avatar ? i.avatar : '/static/icon/icon04.png'" mode="widthFix">
										</image>
									</view>
									<view class="">
										<view class="dis jss aic">
											<view class="username">{{i.nickName}}</view>
											<image class="right" src="/static/icon/right.png" mode="widthFix"></image>
											<view class="username">{{i.commentMember}}</view>
										</view>
										<view class="dis jss aic time">
											<view>{{i.createTime | monthDay}}</view>
											<view>{{i.createTime | hourMinute }}</view>
										</view>
									</view>
								</view>
								<view class="centent">
									<CommentInput :isOpen="true" @submit="submit" :id="i.id">
										<template v-slot:trigger="{ showCommentInput }">
											<text class="text" @tap="showCommentInput">{{i.content}}</text>

										</template>

									</CommentInput>

								</view>
							</view>
						</view>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import MoreDel from '@/compontents/DeleteMy.vue'
	import More from '@/compontents/More.vue'
	import CommentInput from '@/compontents/CommentInput.vue'
	import {
		discussionInfo,
		discussioncomment,
		discussionLike,
		follow
	} from '@/api.js'
	export default {
		components: {
			CommentInput,
			MoreDel,
			More
		},
		data() {
			return {
				list1: [{
					name: '评论留言',
				}],
				discussionDetail: {},
				id: '', // 评论id
				contentId: '',
				commentList: [],
				// 是否是我的列表跳入详情页
				isMy: false
			}
		},
		onLoad(opt) {
			console.log('详情参数', opt);
			if (opt.id) {
				this.id = opt.id
				this.getDetail(opt.id)
			}
			console.log(' opt.isMy', opt.isMy);
			this.isMy = opt.isMy

		},
		methods: {
			// 删除帖子成功
			delCom() {
				uni.showToast({
					icon: 'none',
					title: '删除成功'
				})

				uni.$emit('refreshData');
				setTimeout(() => {
					uni.navigateBack()
				}, 2000)

			},
			async followClick() {
				let res = await follow({
					memberId: this.discussionDetail.memberId,
					type: this.discussionDetail.isFollow == 0 ? 1 : 0
				})
				this.getDetail()
			},
			// 点赞
			async like() {

				let res = await discussionLike({
					contentId: this.discussionDetail.id,
					type: this.discussionDetail.isLike == 1 ? 0 : 1
				})
				this.getDetail()
			},
			async getDetail() {
				let res = await discussionInfo({
					id: this.id
				})
				this.discussionDetail = res.result
				this.commentList = res.result.commentList
				console.log('res详情', res);
			},
			setId() {
				this.contentId = this.id
				console.log('contentId', this.contentId);
			},
			async submit(e, id) {
				console.log('e,id', e, id);
				let res = await discussioncomment({
					contentId: id,
					content: e
				})
				uni.showToast({
					title: '评论成功',
					icon: "none"
				})
				this.getDetail()
			},
			share() {

			},
		},
		filters: {
			// 提取月份和日期
			monthDay(value) {
				if (!value) return ''
				const datePart = value.split(' ')[0] || ''
				return datePart.substr(5)
			},

			// 提取时分并转换格式
			hourMinute(value) {
				if (!value) return ''
				const timePart = value.split(' ')[1] || ''
				return timePart.replace(/:\d+$/, '').replace(':', '.')
			}
		}
	}
</script>

<style scoped lang="scss">
	.roast {
		padding: 30rpx;
		box-sizing: border-box;

		.userinfo {
			.aravat {
				width: 70rpx;
				height: 70rpx;
				border-radius: 70rpx;
				overflow: hidden;
				margin-right: 15rpx;
			}

			.gunazhu {
				width: 110rpx;
				height: 50rpx;
				background: #FEE148;
				border-radius: 50rpx 50rpx 50rpx 50rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #000000;
				text-align: center;
				line-height: 50rpx;
			}

			.ready_gunazhu {
				width: 110rpx;
				height: 50rpx;

				border-radius: 50rpx 50rpx 50rpx 50rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				background: rgba(218, 255, 240, 0.6);
				color: rgba(0, 199, 119, 0.6);
				text-align: center;
				line-height: 50rpx;
			}

			.live {
				width: 50rpx;
			}

			.more {
				width: 48rpx;
				height: 48rpx;
			}

			.username {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;
			}

			.time {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 20rpx;
				color: #858585;
				margin-top: 2rpx;

				view {
					margin-right: 10rpx;
				}
			}
		}

		.centent {


			.text {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				line-height: 48rpx;
				color: #000000;
			}
		}

		.detail {
			margin-top: 12rpx;

			.browse {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 24rpx;
				color: #585858;
				line-height: 36rpx;
			}

			.msg {
				width: 48rpx;
			}

			.line2 {
				width: 2rpx;
				height: 30rpx;
				background: #9B9B9B;
				margin: 0 18rpx;
			}

			.zan {
				width: 44rpx;
			}

			.operate {
				width: 125rpx;
				height: 40rpx;
				line-height: 40rpx;
				text-align: center;
				background: rgba(218, 255, 240, 0.6);
				border-radius: 6rpx 6rpx 6rpx 6rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 22rpx;
				color: rgba(0, 199, 119, 0.6);
			}
		}

		.btns {
			margin-top: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.btn {
				display: flex;
				justify-content: space-around;
				align-items: center;
				margin: 0 42rpx;

				.icon {
					width: 42rpx;
				}

				.lable {
					color: #7f7f7f;
					font-size: 24rpx;
				}
			}
		}

		.official_account {
			padding: 10rpx 54rpx;
			box-sizing: border-box;

			.title {
				font-size: 32rpx;
				color: #000;
				line-height: 42rpx;
				font-weight: 600;
				margin-bottom: 20rpx;
			}

			.tips {
				font-size: 24rpx;
				color: #7F7F7F;
				line-height: 42rpx;
				font-weight: 500;
			}

			.code {
				width: 186rpx;
			}
		}
	}

	.comment {

		.aravat {
			width: 70rpx;
			height: 70rpx;
			border-radius: 70rpx;
			overflow: hidden;
			margin-right: 15rpx;
		}


		.more {
			width: 48rpx;
			height: 48rpx;
		}

		.username {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #000000;
		}

		.time {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 20rpx;
			color: #858585;
			margin-top: 2rpx;

			view {
				margin-right: 10rpx;
			}
		}

		.centent {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #000000;
			line-height: 48rpx;
			padding: 0 70rpx;
			box-sizing: border-box;
			margin-top: 4rpx;

			.text {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #000000;
				line-height: 48rpx;
			}
		}

		.reply {
			background: #F8F8FA;

			width: 626rpx;
			border-radius: 27rpx 27rpx 27rpx 27rpx;
			margin-left: 60rpx;
			margin-top: 30rpx;
			position: relative;

			.subscript {
				position: absolute;
				top: -30rpx;
				left: 0;
				background: #F8F8FA;
				width: 30rpx;
				height: 60rpx;
				clip-path: polygon(0% 0%, 0% 100%, 100% 50%);
			}

			.li {

				padding: 20rpx 30rpx;
				box-sizing: border-box;

				.right {
					width: 22rpx;
					margin: 0 4rpx;
				}

				.aravat {
					width: 70rpx;
					height: 70rpx;
					border-radius: 70rpx;
					overflow: hidden;
					margin-right: 15rpx;
				}


				.more {
					width: 48rpx;
					height: 48rpx;
				}

				.username {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #000000;
				}

				.time {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 20rpx;
					color: #858585;
					margin-top: 2rpx;

					view {
						margin-right: 10rpx;
					}
				}

				.centent {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #000000;
					line-height: 48rpx;
					padding: 0 70rpx;
					box-sizing: border-box;
					margin-top: 4rpx;

					.text {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 32rpx;
						color: #000000;
						line-height: 48rpx;
					}
				}
			}

		}

	}

	.image_art {
		max-width: 300rpx;
		max-height: 300rpx;
		margin-right: 20rpx;
	}
</style>